<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>心电图</title>
    <style>
      html,body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background-color: #37393e;
      }
      #heart-chart {
        width: 100%;
        height: 100%;
        background-color: #37393e;
      }
    </style>
</head>

<body>
    <div id="heart-chart"></div>
    <script src="js/echarts.min.js" charset="utf-8"></script>
    <script>
        document.addEventListener('message', function(e) {
          var tempData = JSON.parse(e.data);
          window.ecgData = window.ecgData.concat(tempData);
        });
        initHeart();
        function initHeart() {
            // 基于准备好的dom，初始化echarts实例
            window.myChart = echarts.init(document.getElementById('heart-chart'));
            // 指定图表的配置项和数据
            function handleData(value) {
              now = new Date(+now + oneDay);
              return {
                  name: now.toString(),
                  value: [
                      [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                      value
                  ]
              }
            }

            var data = [];
            window.ecgData = [];
            var now = +new Date(1);
            var oneDay = 24 * 3600 * 1000;
            data.push(handleData(0));

            option = {
                title: {
                    text: '心电图',
                    left:'center',
                    top:'20px',
                    textStyle:{
                      color:'#ffffff'
                    }
                },
                xAxis: {
                    show:true,
                    type: 'time',
                    splitLine: {
                        show: true,
                        lineStyle:{
                          type:'dashed',
                        },
                    },
                    axisLine:{
                      lineStyle:{
                        color:'#ffffff',
                      }
                    },
                    axisLabel:{
                      show:false,
                    }
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    splitLine: {
                        show: true,
                        lineStyle:{
                          type:'dashed',
                        },
                    },
                    axisLine:{
                      lineStyle:{
                        color:'#ffffff',
                      }
                    }
                },
                series: [{
                    name: '数据',
                    type: 'line',
                    showSymbol: false,
                    hoverAnimation: false,
                    data: data,
                    smooth:true,
                    lineStyle:{
                      color:'#BA9866',
                    }
                }]
            };

            setInterval(function () {
                if (window.ecgData.length < 300) return;
                for (var i = 0; i < 500; i++) {
                  if (data.length >= 1000) {
                    data.shift();
                  }
                  data.push(handleData(window.ecgData[0]));
                  window.ecgData.shift();
                }

                myChart.setOption({
                    series: [{
                        data: data
                    }]
                });
            }, 1000);
            // 使用刚指定的配置项和数据显示图表。
          window.myChart.setOption(option);
        }
    </script>
</body>

</html>
